<template>
    <div>
        <!-- <Heard></Heard>
        <category-nav :categories1="categories1" :isHidden="true"></category-nav> -->
        <div class="i_bg">
            <div class="postion">
                <span class="fl">全部 > 美妆个护 > 香水 > 迪奥 > 迪奥真我香水</span>
            </div>    
            <div class="content">
                <!-- 商品照片 -->
                <div id="tsShopContainer">
                    <div id="tsImgS"><a href="../../../assets/images/p_big.jpg" title="../../../assets/images" class="MagicZoom" id="MagicZoom"><img :src="'http://192.168.79.98:9001/'+product.fileName" width="390" height="390" /></a></div>
                    <!-- <div id="tsPicContainer">
                        <div id="tsImgSArrL" onclick="tsScrollArrLeft()"></div>
                        <div id="tsImgSCon">
                            <ul>
                                <li onclick="showPic(0)" rel="MagicZoom" class="tsSelectImg"><img src="../../../assets/images/ps1.jpg" tsImgS="../../../assets/images/ps1.jpg" width="79" height="79" /></li>
                                <li onclick="showPic(1)" rel="MagicZoom"><img src="../../../assets/images/ps2.jpg" tsImgS="../../../assets/images/ps2.jpg" width="79" height="79" /></li>
                                <li onclick="showPic(2)" rel="MagicZoom"><img src="../../../assets/images/ps3.jpg" tsImgS="../../../assets/images/ps3.jpg" width="79" height="79" /></li>
                                <li onclick="showPic(3)" rel="MagicZoom"><img src="../../../assets/images/ps4.jpg" tsImgS="../../../assets/images/ps4.jpg" width="79" height="79" /></li>
                                <li onclick="showPic(4)" rel="MagicZoom"><img src="../../../assets/images/ps1.jpg" tsImgS="../../../assets/images/ps1.jpg" width="79" height="79" /></li>
                                <li onclick="showPic(5)" rel="MagicZoom"><img src="../../../assets/images/ps2.jpg" tsImgS="../../../assets/images/ps2.jpg" width="79" height="79" /></li>
                                <li onclick="showPic(6)" rel="MagicZoom"><img src="../../../assets/images/ps3.jpg" tsImgS="../../../assets/images/ps3.jpg" width="79" height="79" /></li>
                                <li onclick="showPic(7)" rel="MagicZoom"><img src="../../../assets/images/ps4.jpg" tsImgS="../../../assets/images/ps4.jpg" width="79" height="79" /></li>
                            </ul>
                        </div>
                        <div id="tsImgSArrR" onclick="tsScrollArrRight()"></div>
                    </div> -->
                     <!-- <img class="MagicZoomLoading" width="16" height="16" src="../../../assets/images/loading.gif" alt="Loading..." />			 -->
                </div>
                <!-- 商品中间的名称和描述 -->
                <div class="pro_des">
                    <div class="des_name">
                        <p>{{ product.name }}</p>
                        {{ product.description }}
                    </div>
                    <div class="des_price">
                        本店价格：<b>￥{{ product.price }}</b><br />
                        消费积分：<span>28R</span>
                    </div>
                    <div class="des_choice">
                        <span class="fl">型号选择：</span>
                        <ul>
                            <li class="checked">30ml<div class="ch_img"></div></li>
                            <li>50ml<div class="ch_img"></div></li>
                            <li>100ml<div class="ch_img"></div></li>
                        </ul>
                    </div>
                    <div class="des_choice">
                        <span class="fl">颜色选择：</span>
                        <ul>
                            <li>红色<div class="ch_img"></div></li>
                            <li class="checked">白色<div class="ch_img"></div></li>
                            <li>黑色<div class="ch_img"></div></li>
                        </ul>
                    </div>
                    <div class="des_share">
                        <div class="d_sh">
                            分享
                            <div class="d_sh_bg">
                                <a href="#"><img src="../../../assets/images/sh_1.gif" /></a>
                                <a href="#"><img src="../../../assets/images/sh_2.gif" /></a>
                                <a href="#"><img src="../../../assets/images/sh_3.gif" /></a>
                                <a href="#"><img src="../../../assets/images/sh_4.gif" /></a>
                                <a href="#"><img src="../../../assets/images/sh_5.gif" /></a>
                            </div>
                        </div>
                        <div class="d_care"><a @click="clickCollectIcon(productId)">收藏商品</a></div>
                    </div>
                    <div class="des_join">
                        <div class="j_nums">
                            <input type="text" @blur="checkNum" v-model="count" name="" class="n_ipt" />
                            <input type="button" value="" @click="add" class="n_btn_1" />
                            <input type="button" value="" @click="reduce" class="n_btn_2" />   
                        </div>
                        <span class="fl"><a @click="addToCart(productId,count)"><img src="../../../assets/images/j_car.png" /></a></span>
                    </div>            
                </div>    
                <!-- 右边的品牌图片 -->
                <div class="s_brand">
                    <div class="s_brand_img"><img src="../../../assets/images/sbrand.jpg" width="188" height="132" /></div>
                    <div class="s_brand_c"><a href="#">进入品牌专区</a></div>
                </div>    
                
                
            </div>
            <div class="content mar_20">
                <div class="l_history">
                    <div class="fav_t">用户还喜欢</div>
                    <ul>
                        <li>
                            <div class="img"><a href="#"><img src="../../../assets/images/his_1.jpg" width="185" height="162" /></a></div>
                            <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                            <div class="price">
                                <font>￥<span>368.00</span></font> &nbsp; 18R
                            </div>
                        </li>
                        <li>
                            <div class="img"><a href="#"><img src="../../../assets/images/his_2.jpg" width="185" height="162" /></a></div>
                            <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                            <div class="price">
                                <font>￥<span>768.00</span></font> &nbsp; 18R
                            </div>
                        </li>
                        <li>
                            <div class="img"><a href="#"><img src="../../../assets/images/his_3.jpg" width="185" height="162" /></a></div>
                            <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                            <div class="price">
                                <font>￥<span>680.00</span></font> &nbsp; 18R
                            </div>
                        </li>
                        <li>
                            <div class="img"><a href="#"><img src="../../../assets/images/his_4.jpg" width="185" height="162" /></a></div>
                            <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                            <div class="price">
                                <font>￥<span>368.00</span></font> &nbsp; 18R
                            </div>
                        </li>
                        <li>
                            <div class="img"><a href="#"><img src="../../../assets/images/his_5.jpg" width="185" height="162" /></a></div>
                            <div class="name"><a href="#">Dior/迪奥香水2件套装</a></div>
                            <div class="price">
                                <font>￥<span>368.00</span></font> &nbsp; 18R
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="l_list">        	
                    <div class="des_border">
                        <div class="des_tit">
                            <ul>
                                <li class="current"><a href="#p_attribute">商品属性</a></li>
                                <li><a href="#p_details">商品详情</a></li>
                                <!-- <li><a href="#p_comment">商品评论</a></li> -->
                            </ul>
                        </div>
                        <div class="des_con" id="p_attribute">
                            
                            <table border="0" align="center" style="width:100%; font-family:'宋体'; margin:10px auto;" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>商品名称：{{product.name}}</td>

                                <td>上架时间：{{ product.creationDate }} </td>
                            </tr>
                            <tr>
                                <td>容量：1ml-15ml </td>
                                <td>类型：美妆</td>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                            </tr>
                            </table>                                               
                                                    
                                
                        </div>
                    </div>  
                    
                    <div class="des_border" id="p_details">
                        <div class="des_t">商品详情</div>
                        <div class="des_con">
                            <table border="0" align="center" style="width:745px; font-size:14px; font-family:'宋体';" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="265"><img :src="'http://192.168.79.98:9001/'+product.fileName" width="206" height="412" /></td>
                                <td>
                                    <b>迪奥真我香水(Q版)</b><br />
                                    【商品规格】：5ml<br />
                                    【商品质地】：液体<br />
                                    【商品日期】：与专柜同步更新<br />
                                    【商品产地】：法国<br />
                                    【商品包装】：无外盒 无塑封<br />
                                    【商品香调】：花束花香调<br />
                                    【适用人群】：适合女性（都市白领，性感，有女人味的成熟女性）<br />
                                </td>
                            </tr>
                            </table>
                            
                            <p align="center">
                            <img :src="'http://192.168.79.98:9001/'+product.fileName" width="746" height="425" /><br /><br />
                            </p>
                            
                        </div>
                    </div>  
                    
                    <!-- <div class="des_border" id="p_comment">
                        <div class="des_t">商品评论</div>
                        
                        <table border="0" class="jud_tab" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="175" class="jud_per">
                                <p>80.0%</p>好评度
                            </td>
                            <td width="300">
                                <table border="0" style="width:100%;" cellspacing="0" cellpadding="0">
                                <tr>
                                    <td width="90">好评<font color="#999999">（80%）</font></td>
                                    <td><img src="../../../assets/images/pl.gif" align="absmiddle" /></td>
                                </tr>
                                <tr>
                                    <td>中评<font color="#999999">（20%）</font></td>
                                    <td><img src="../../../assets/images/pl.gif" align="absmiddle" /></td>
                                </tr>
                                <tr>
                                    <td>差评<font color="#999999">（0%）</font></td>
                                    <td><img src="../../../assets/images/pl.gif" align="absmiddle" /></td>
                                </tr>
                                </table>
                            </td>
                            <td width="185" class="jud_bg">
                                购买过雅诗兰黛第六代特润精华露50ml的顾客，在收到商品才可以对该商品发表评论
                            </td>
                            <td class="jud_bg">您可对已购买商品进行评价<br /><a href="#"><img src="../../../assets/images/btn_jud.gif" /></a></td>
                        </tr>
                        </table>
                        
                        
                                        
                        <table border="0" class="jud_list" style="width:100%; margin-top:30px;" cellspacing="0" cellpadding="0">
                        <tr valign="top">
                            <td width="160"><img src="../../../assets/images/peo1.jpg" width="20" height="20" align="absmiddle" />&nbsp;向死而生</td>
                            <td width="180">
                                颜色分类：<font color="#999999">粉色</font> <br />
                                型号：<font color="#999999">50ml</font>
                            </td>
                            <td>
                                产品很好，香味很喜欢，必须给赞。 <br />
                                <font color="#999999">2015-09-24</font>
                            </td>
                        </tr>
                        <tr valign="top">
                            <td width="160"><img src="../../../assets/images/peo2.jpg" width="20" height="20" align="absmiddle" />&nbsp;就是这么想的</td>
                            <td width="180">
                                颜色分类：<font color="#999999">粉色</font> <br />
                                型号：<font color="#999999">50ml</font>
                            </td>
                            <td>
                                送朋友，她很喜欢，大爱。 <br />
                                <font color="#999999">2015-09-24</font>
                            </td>
                        </tr>
                        <tr valign="top">
                            <td width="160"><img src="../../../assets/images/peo3.jpg" width="20" height="20" align="absmiddle" />&nbsp;墨镜墨镜</td>
                            <td width="180">
                                颜色分类：<font color="#999999">粉色</font> <br />
                                型号：<font color="#999999">50ml</font>
                            </td>
                            <td>
                                大家都说不错<br />
                                <font color="#999999">2015-09-24</font>
                            </td>
                        </tr>
                        <tr valign="top">
                            <td width="160"><img src="../../../assets/images/peo4.jpg" width="20" height="20" align="absmiddle" />&nbsp;那*****洋 <br /><font color="#999999">（匿名用户）</font></td>
                            <td width="180">
                                颜色分类：<font color="#999999">粉色</font> <br />
                                型号：<font color="#999999">50ml</font>
                            </td>
                            <td>
                                下次还会来买，推荐。<br />
                                <font color="#999999">2015-09-24</font>
                            </td>
                        </tr>
                        </table>
                    </div> -->
                </div>
            </div>
            
            
            <!--Begin 弹出层-收藏成功 Begin-->
            <div id="fade" class="black_overlay"></div>
            <div id="MyDiv" class="white_content">             
                <div class="white_d">
                    <div class="notice_t">
                        <span class="fr" style="margin-top:10px; cursor:pointer;" ><img src="../../../assets/images/close.gif" /></span>
                    </div>
                    <div class="notice_c">
                        
                        <table border="0" align="center" style="margin-top:5px;" cellspacing="0" cellpadding="0">
                        <tr valign="top">
                            <td width="40"><img src="../../../assets/images/suc.png" /></td>
                            <td>
                                <span style="color:#3e3e3e; font-size:18px; font-weight:bold;">您已成功收藏该商品</span><br />
                                <a href="#">查看我的关注 >></a>
                            </td>
                        </tr>
                        <tr height="50" valign="bottom">
                            <td>&nbsp;</td>
                            <td><a href="#" class="b_sure">确定</a></td>
                        </tr>
                        </table>
                            
                    </div>
                </div>
            </div>    
            <!--End 弹出层-收藏成功 End-->
            
               <!--Begin 弹出层-加入购物车 Begin-->
    <div id="fade1" class="black_overlay" :class="{isShow:addCartInfo}"></div>
    <div id="MyDiv1" class="white_content" :class="{isShow:addCartInfo}">             
        <div class="white_d" >
            <div class="notice_t">
                <span class="fr" style="margin-top:0px; cursor:pointer;"  @click="addCartInfo = false"><img src="../../../assets/images/close.gif" /></span>
            </div>
            <div class="notice_c">
           		
                <table border="0" align="center" style="margin-top:0px;" cellspacing="0" cellpadding="0">
                  <tr valign="top">
                    <td width="40"><img src="../../../assets/images/suc.png" /></td>
                    <td>
                    	<span style="color:#3e3e3e; font-size:18px; font-weight:bold;">宝贝已成功添加到购物车</span><br />
                    	购物车共有{{cartList.length}}种宝贝 &nbsp; &nbsp; 合计：{{totalPrice}}元
                    </td>
                  </tr>
                  <tr height="50" valign="bottom">
                  	<td>&nbsp;</td>
                    <td><router-link to="/cart-one"  class="b_sure">去购物车结算</router-link><a  class="b_buy" @click="addCartInfo = false">继续购物</a></td>
                  </tr>
                </table>
                    
            </div>
        </div>
    </div>  
            <!--End 弹出层-加入购物车 End-->  
        </div>
        <my-footer-1></my-footer-1>
    </div>

</template>

<script>
import computeNumber from '@/assets/js/computeNumber';
import MyFooter1 from '@/components/MyFooter1.vue';
import Heard from '../Heard.vue';
import CategoryNav from '../CategoryNav.vue';

export default {
    name:'GoodsDetail',
    components:{Heard,MyFooter1,CategoryNav},
    mounted(){
        // this.getCategoryByPId(0);//获取首页一级分类信息
        this.getProductById(this.productId);
    },
    computed:{
        totalPrice(){
            return this.cartList.reduce((sum,item)=>{
                let count = item.count;
                let price = item.price;
                if (!isNaN(price) && !isNaN(count)) {
                    return computeNumber(sum, '+', computeNumber(price, '*', count).result).result;
                }
                return sum;
            },0);
        },
        cartList(){
            return this.$store.state.cartList;
        },
    },
    data:function(){
        return{
            product:{},
            productId:this.$route.params.id,
            categories1:[],
            count:1,
            isShow:false,
            addCartInfo:false,
        }
    },
    methods:{
        //解决精度问题，计算价格
        countNumber(num1,type,num2){
           return computeNumber(num1,type,num2).result;
        },
        getCarts(){
            this.$axios({
                url:'/easybuy/cart/all'
            }).then(rs=>{
                //将购物车数据存放到vuex中
                window.sessionStorage.setItem('cartList',JSON.stringify(rs.data.productVoList));
                this.$store.commit('changeCartList',rs.data.productVoList);
                
            })
        },
        addProducts(productId,counts){
            this.$axios({
                url:'/easybuy/cart/addCount',
                params:{
                    productId,
                    counts
                }
            }).then(rs=>{
                if(rs.data.code == 500){
                    this.$message.error('添加失败，服务器错误！');
                }else if(rs.data.code == 200){
                    this.addCartInfo = true;
                    this.getCarts();
                }
            })
        },
       
        //将商品添加到购物车
        addToCart(productId,counts){
             //校验库存的方法
            this.$axios({
                url:'/easybuy/products/getById',
                params:{
                    id:productId
                }
            }).then(rs=>{
                let stock = rs.data.product.stock;
                let preout = rs.data.product.preout;
                console.log("库存",stock-preout);
                console.log("要购买的数量",this.count);
                if((stock-preout) < this.count){
                   this.$message.error('库存不足！');
                }else {
                    this.addProducts(productId,counts);
                }
            })
            
        },
        //输入框输入
        checkNum(){
            let regx = /^[0-9]*[1-9][0-9]*$/;
            if(!regx.test(this.count)){
                this.$message.error('购买商品的数量必须为正整数！');
                this.count = 1;
                return;
            }
        },
        //添加
        add(){
            this.count = this.count+1;
        },
        //减少
        reduce(){
            if(this.count>1){
                this.count = this.count-1;
            }else{
                this.$message.error('已达到商品最小购买数量！');
            }
        },
        //获取收藏夹中的所有商品
        getCollects(){
            this.$axios({
                url:'/easybuy/collect/all',
            }).then(rs=>{
                //将收藏夹中的商品信息存到vuex中
                console.log("collectList:",rs.data.collectList);
                this.$store.commit('changeCollects',rs.data.collectList);
                window.sessionStorage.setItem('collects',JSON.stringify(rs.data.collectList));
            })
        },
        //点击收藏
        clickCollectIcon(productId){
            // alert(productId)
            //判断用户是否登录，如果没登录是不能添加到收藏夹的
            if(!this.$store.state.loginStatus){
                this.$message.error("请先登录");
                return;
            }
            this.$axios({
                url:'/easybuy/collect/add',
                params:{
                    productId
                }
            }).then(rs=>{
                if(rs.data.code == 200){
                     this.isShow = true;
                     this.getCollects();
                }else if(rs.data.code == 5001){
                    this.$message.info("该商品已存在收藏夹中！");
                }else if(rs.data.code == 5002){
                    this.$message.error("最多只能收藏6个商品！");
                }else{
                    this.$message.error("添加失败！");
                }
            })
          
        },
        //获取该商品的详细信息
        getProductById(id){
            this.$axios({
                url:'/easybuy/products/getById',
                params:{
                    id
                }
            }).then(rs=>{
                console.log(rs);
                this.product = rs.data.product;
            })
        },
    }

}
</script>

<style  scoped>
    .isShow{
        display: block;
    }

</style>